loadList();
// deleteFn();
// selectFn();
// pagenumFn()
// 显示购物车列表
async function loadList(){
    let mainMiddle = document.querySelector(".main-middle");
    console.log(mainMiddle);
    let uid = localStorage.getItem("uid");
    console.log(uid);
    let {data} = await axios.get(cartListAPI,{params:{id:uid}});
    console.log(data);
    let html = `  `

    if(data.data.length == 0){
         html = `<div class="cart-empty">
                    <div class="empty-content">
                        <img src="../img/cart4.jpg" alt="">
                        <p class="empty-con">暂时没有心仪的商品，快去<a href="../index.html">挑选吧</a></p>
                    </div>
                </div>  `
        $(".main-middle").html(html);
    }
    let arr = data.data;
    console.log(arr);
    let resArr = arr.map((v) =>
        `
        <ul class="list cart-list">
                <li class="select">
                    <input type="checkbox" class="chose">
                    <span class="image"><img src="${v.pimg}" alt=""></span>
                    <p class="cart-name">${v.pname}</p>
                </li>
                <li class="price">￥${v.pprice}</li>
                <li class="cart-num">
                    <div class="stock">
                        <span class="add" data-pid="${v.pid}">+</span>
                        <input type="text"  class="num" data-pprice="${v.pprice}" data-pid="${v.pid}" type="text" value="${v.pnum}">
                        <span class="sum" data-pid="${v.pid}">-</span>
                        <i class="tet">只限制3件</i>
                    </div> 
                </li>
                <li class="count">￥${(v.pprice * v.pnum).toFixed(2)}</li>
                <li class="del" data-pid="${v.pid}">删除</li>
             </ul>
        `

    );
    html += resArr.join("");
    mainMiddle.innerHTML = html;

    
    deleteFn()
    pagenumFn()
    selectFn()
    countPrice()
}

// 删除
function deleteFn(){
    let delBtns = document.querySelectorAll(".del")
    console.log(delBtns);
    delBtns.forEach((del) =>{
        del.onclick = function(){
            let uid = localStorage.getItem("uid");
            let pid = del.getAttribute("data-pid")
            let token = localStorage.getItem("token");
            del.parentNode.remove();
            axios
                .get(cartDeleteAPI,{params:{uid,pid,token}})
                .then((res)=>{
                    console.log(res.data);
                    loadList();
                })
                // loadList();
        }
    })
    
}

// pagenumFn()
// 获取数量
function pagenumFn(){
    // $(".num").val(1)
    $(".add").click(function(){
        // window.location.reload();
        // console.log(222);
        let pnum = $(this).siblings(".num").val();

        pnum++;
        if(pnum>3){
            pnum=3;
            // $(".tet").css("display","block");
        }
        // else if(pnum<3){
        //     $(".tet").css("display","none");
        // }
        $(this).siblings(".num").val(pnum);
        let pid = $(this).attr("data-pid");
        let uid = localStorage.getItem("uid");
        axios 
            .get(cartUpdateAPI,{params:{uid,pid,pnum}})
            .then((res)=>{
                console.log(res.data);
                loadList()
                // countPrice()
            })
            // loadList()
    })

    $(".sum").click(function(){
        // location.reload();
        // console.log(333);
        let pnum = $(this).siblings(".num").val();

        pnum--;
        if(pnum<1){
            pnum = 1;
        } else if(pnum<3){
            // $(".tet").css("display","none");
        }
        $(this).siblings(".num").val(pnum);
        let pid = $(this).attr("data-pid");
        let uid = localStorage.getItem("uid");
        axios 
            .get(cartUpdateAPI,{params:{uid,pid,pnum}})
            .then((res)=>{
                console.log(res.data);
                loadList()
            })
            
    })

    $(".num").change(function(){
        console.log(123);
        let pnum = parseInt($(this).val());
        if(pnum>3){
            pnum = 3;
            // $(".tet").css("display","block");
        }else if(pnum<=1){
            pnum = 1;
        }else if(typeof pnum != "number" || isNaN(pnum)){
            pnum = 1;
        }

        $(this).val(pnum);
        let pid = $(this).attr("data-pid");
        let uid = localStorage.getItem("uid");
        axios 
            .get(cartUpdateAPI,{params:{uid,pid,pnum}})
            .then((res)=>{
                console.log(res.data);
                loadList()
            })
    })
    // countPrice()
}

// 全选
$(".whole").change(function(){
    let flag = $(this).prop("checked");
    $("input[type = 'checkbox']").prop("checked",flag);
    countPrice();
})
// 单选
function selectFn(){
    $(".chose").change(function(){
        let choseArr = Array.from($(".chose"));
        let flag = choseArr.every((v) => v.checked == true);
        $(".whole").prop("checked",flag);

        countPrice();
    });
}

// 计算总价
function countPrice(){
    let sum = 0;
    let count = Array.from($(".count"));
    console.log(count);

    count.forEach((v) =>{
        let node = v.parentNode;
        let chosen = node.querySelector(".chose");
        console.log(node,chosen);

        if(chosen.checked == true){
            // let pnum = v.value;
            // let price = v.getAttribute("data-price");
            // sum = sum + pnum * price;
            sum += parseFloat(v.innerHTML.substr(1));
            console.log(sum);
        }
    });
    let totle = document.querySelector(".totle");
    totle.innerHTML ="￥" + sum;
    
}


